<template>
  <div class="container">
    <div class="userinfo">
      <div class="profile">
        <div class="smallprofile">
          <img :src="'http://localhost:3007/uploads/'+userinfo.user_pic" alt="">
        </div>
      </div>
      <div class="username">{{ userinfo.user_name }}</div>
    </div>
    <div class="uploadavatar" @click="uploadAvatarVisible = true">
      点击上传头像
    </div>
    <div class="care">
      <div class="caretext" @click="dialogTableVisible = true">关注</div>
      <div class="carenum">{{ noticeList.length }}</div>
    </div>
    <div class="fans">
      <div class="fanstext">粉丝</div>
      <div class="fansnum">{{ fansnum }}</div>
    </div>
    <div v-if="loginstatus === true" class="login" @click="showLoginDialog = true">登录</div>
    <div v-if="loginstatus === true" class="register">注册</div>
    <div v-if="loginstatus === false" class="out" @click="layout">退出</div>
    <div class="publish" @click="gotoRelease"></div>
    <div class="shopping" @click="shoppingDialogVisible = true"></div>
    <div class="shoprecord" @click="shopRecordDialogVisible = true"></div>
  </div>
  <div style="background-color:#f3f3f3">
    <div
      v-for="(item,index) in selfList"
      :key="index"
      class="textcontainer"
    >
      <div class="title" @click="gotoContent(item.id)">{{ item.title }}</div>
      <div class="time">发布日期:{{ item.time }}</div>
      <div class="text">{{ item.content }}</div>
      <el-button type="danger" class="delbtn" @click="delSelf(item.id)">删除</el-button>
    </div>
  </div>
  <login-form
    v-if="showLoginDialog"
    class="loginform"
    @close-dialog="showLoginDialog = false"
  />
  <!-- <upload-dialog v-if="uploadAvatarDialog" class="uploaddialog" @close-dialog="uploadAvatarDialog = false" /> -->
  <el-dialog v-model="dialogTableVisible" title="关注列表" width="20%">
    <el-table :data="noticeList">
      <el-table-column
        property="author"
        label="作者"
        width="220"
      >
        <template #default="{ row }">
          <div @click="getNoticeArticle(row.author)">{{ row.author }}</div>
        </template>
      </el-table-column>
      <el-table-column property="id" width="100">
        <template #default="{ row }">
          <el-button type="danger" @click="cancelNotice(row.id)">取消关注</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <el-dialog
    v-model="uploadAvatarVisible"
    title="上传或更换头像"
    width="25%"
  >
    <!-- <el-upload
      action="#"
      accept=".jpg,.png"
      :http-request="addAvatar"
      :on-change="imgBroadcastChange"
      :show-file-list="false"
      :limit="1"
    >
      <div class="pic-btn-body">
        <el-button type="primary">Click to upload</el-button>
      </div>
    </el-upload> -->
    <input
      ref="inputer"
      type="file"
      name="img"
      accept="image/png,image/jpeg,image/gif,image/jpg"
      @change="addAvatar"
    >
    <div style="cursor: pointer;margin-top:20px" @click="changeAvatar">确定</div>
  </el-dialog>
  <el-dialog
    v-model="shoppingDialogVisible"
    title="购物车"
    width="50%"
    :before-close="handleClose"
  >
    <div class="shopcontainer">
      <div
        v-for="(item, index) in usershoplist"
        :key="index"
      >
        <div v-if="item.shop_id !== null" class="shopbox">
          <div class="shopname">{{ item.shop_name }}</div>
          <div class="shopimg">
            <img :src="'http://localhost:3007/uploads/'+item.shop_img" alt="">
          </div>
          <div class="shopprice">{{ item.shop_price }}</div>
          <div class="shopstatus">
            <el-button
              class="delbtn"
              type="danger"
              round
              @click="delUserShopInfo(item.shop_id)"
            >
              移除购物车
            </el-button>
            <el-button
              class="shopbtn"
              type="warning"
              round
              @click="shopGoods(item.shop_id)"
            >
              购买
            </el-button>
          </div>
        </div>
        <div v-if="item.shop_id === null"></div>
      </div>
    </div>
  </el-dialog>
  <el-dialog
    v-model="shopRecordDialogVisible"
    title="购物信息"
    width="50%"
    :before-close="handleClose"
  >
    <div class="shoprecordcontainer">
      <div v-for="(item,index) in usershopgoodslist" :key="index" class="recordbox">
        <div class="recordname">{{ item.shop_name }}</div>
        <div class="recordpice">{{ item.shop_price }}</div>
        <div v-if="item.shopping_status === 0" class="recordstatus">待发货</div>
        <div v-if="item.shopping_status === 1" class="recordstatus">已发货</div>
        <div v-if="item.shopping_status === 2" class="recordstatus">待签收</div>
        <div v-if="item.shopping_status === 3" class="recordstatus">已签收</div>
      </div>
    </div>
  </el-dialog>
  <el-dialog
    v-model="delSelfDialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <span>是否删除此篇文章？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button
          type="primary"
          @click="delSelfList(delid)"
        >Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import 'element-plus/theme-chalk/index.css'
import { ElDialog, ElTable, ElTableColumn, ElUpload, ElButton } from 'element-plus'
import loginForm from '../components/loginform.vue'
import uploadDialog from '../components/uploadDialog.vue'
export default {
  // eslint-disable-next-line vue/no-unused-components
  components:{ loginForm,uploadDialog, ElDialog, ElTable, ElTableColumn, ElUpload, ElButton },
  data() {
    return {
      userinfo: {},
      carenum:'10',
      fansnum:'1000',
      showLoginDialog:false,
      uploadAvatarDialog:false,
      dialogTableVisible: false,
      uploadAvatarVisible:false,
      shoppingDialogVisible:false,
      shopRecordDialogVisible:false,
      delSelfDialogVisible:false,
      noticeList: [],
      usershoplist:[],
      usershopgoodslist:[],
      selfList:[],
      delid: '',
      avatarimg:'',
      loginstatus:false
      // noticeartcleinfo:[]
    }
  },
  created() {
    this.getUserInfo()
    this.getNoticeList()
    this.getUserShopList()
    this.userShopGoodsList()
  },
  methods: {
    gotoRelease() {
      this.$router.push({ path:'/release' })
    },
    login() {
      this.loginvisible = true
      this.loginstatus = true
    },
    layout() {
      this.loginstatus = true
      window.localStorage.clear()
    },
    async getUserInfo() {
      const res = await this.$api.user.getUserInfo()
      const { data:{ data:userinfo } } = res
      this.userinfo = {
        ...userinfo
      }
      this.getSelfList( this.userinfo.user_name)
    },
    async getNoticeList() {
      const res = await this.$api.notice.getNoticeList()
      const { data: { data:noticeList } } = res
      this.noticeList = [
        ...noticeList
      ]
      console.log(this.noticeList, '------this.noticeList')
    },
    async cancelNotice(data) {
      const id = { 'id':data }
      const res = await this.$api.notice.cancelNotice(id)
      this.getNoticeList()
      if(res.data.status !== 0) {
        this.$message.error('取消关注失败!')
      }else {
        this.$message.success('取消关注成功!')
      }
    },
    async getNoticeArticle(data) {
      const authorname = { 'author':data }
      const res = await this.$api.artcleList.getNoticeArticle(authorname)
      const { data:{ data: noticeartcleinfo } } = res
      this.noticeartcleinfo = [
        ...noticeartcleinfo
      ]
      console.log(this.noticeartcleinfo, '------this.noticeartcleinfo')
      this.$router.push({ path:'/noticearticle', query:{ noticeartcleinfo:JSON.stringify(noticeartcleinfo) } })
    },
    async getUserShopList() {
      const res = await this.$api.shop.getUserShopList()
      const { data:{ data:usershoplist } } = res
      this.usershoplist = [
        ...usershoplist
      ]
      console.log(this.usershoplist, '-----this.usershoplist')
    },
    async userShopGoodsList() {
      const res = await this.$api.shop.userShopGoodsList()
      const { data:{ data:usershopgoodslist } } = res
      this.usershopgoodslist = [
        ...usershopgoodslist
      ]
      console.log(this.usershopgoodslist,'-----this.usershopgoodslist')
    },
    async getSelfList(data) {
      console.log(this.userinfo.user_name,'---------userinfo.user_name')
      const selfname = { 'author': data }
      const res = await this.$api.artcleList.getSelfList(selfname)
      const { data:{ data:selfList } } = res
      this.selfList = [
        ...selfList
      ]
      console.log(this.selfList,'--------this.selfList')
    },
    async gotoContent(id) {
      const res = await this.$api.artcleList.getArtcledetails(id)
      const { data:{ data:artcledetailsinfo } } = res
      this.artcledetailsinfo = {
        ...artcledetailsinfo
      }
      this.$router.push({ path:'/content/', query:artcledetailsinfo })
      // console.log(this.artcledetailsinfo,'----artcledetailsinfo')
    },
    delSelf(data) {
      this.delSelfDialogVisible = true
      this.delid = data
    },
    async delSelfList(data) {
      const saId = { 'id':data }
      const res = await this.$api.artcleList.delSelfList(saId)
      if(res.data.status !== 0) {
        alert('删除失败!')
      } else {
        alert('删除成功!')
        this.delSelfDialogVisible = false
        this.getSelfList(this.userinfo.user_name)
      }
    },
    addAvatar() {
      const inputDOM = this.$refs.inputer
      // 通过DOM取文件数据
      const files = inputDOM.files
      console.log(files, '-----fiels')
      const file = files[0]
      console.log(file, '-------file')
      this.avatarimg = file
    },
    async changeAvatar() {
      const form = new FormData()
      form.append('user_pic', this.avatarimg )
      const res  = await this.$api.user.changeAvatar(form)
      if(res.data.status !== 0) {
        alert('头像上传失败!')
      }else {
        alert('头像上传成功!')
      }
      this.uploadAvatarVisible = false
    },
    async delUserShopInfo(data) {
      const sid = { 'shop_id':data }
      const res = await this.$api.shop.delUserShopInfo(sid)
      if(res.data.status !== 0) {
        alert('移除购物车失败!')
      }else {
        alert('移除购物车成功!')
        this.getUserShopList()
      }
    },
    async shopGoods(data) {
      const ssid = { 'shop_id':data }
      const res = await this.$api.shop.shopGoods(ssid)
      if(res.data.status !== 0) {
        alert('购买商品失败!')
      } else {
        alert('购买商品成功!')
        this.getUserShopList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
    padding: 20px 300px 0 300px;
    display: flex;
    padding-bottom: 20px;
    position: relative;
    background-color: #f8f8f8;
    .userinfo {
      display: flex;
      flex-direction: column;
      .profile {
        width: 79px;
        height: 78px;
        padding-bottom: 10px;
        background-image: url('./images/profilephoto.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: 0 0;
        padding-top: 6.5px;
        padding-left: 7px;
        // .smallprofile {
        //     width: 65px;
        //     height: 65px;
        //     border-radius: 50%;
        //     // background-image: url("./images/keqing.png");
        //     background-size: 100% auto;
        //     background-repeat: no-repeat;
        //     background-position: 0 0;
        // }
        img {
          width: 65px;
          height: 65px;
          border-radius: 50%;
          // background-image: url("./images/keqing.png");
          background-size: 100% auto;
          background-repeat: no-repeat;
          background-position: 0 0;
        }
    }
    .username {
        width: 79px;
        height: 20px;
        color: #000;
        font-size: 16px;
        text-align: center;
    }
    }
    .uploadavatar {
      height: 100%;
      margin-top: 20px;
      margin-left: 20px;
      font-size: 12px;
      cursor: pointer;
      background-color: #2196F3;
    }
    .care {
      width: 50px;
      height: 100px;
      display: flex;
      flex-direction: column;
      font-size: 16px;
      margin-left: 40px;
      text-align: center;
      .caretext {
        color: #000;
        margin-bottom: 10px;
        cursor: pointer;
      }
      .carenum {
        color: #000;
      }
    }
    .fans {
      width: 50px;
      height: 100px;
      display: flex;
      flex-direction: column;
      margin-left: 100px;
      text-align: center;
      .fanstext {
        color: #000;
        margin-bottom: 10px;
      }
      .fansnum {
        color: #000;
      }
    }
    .login {
      width: 50px;
      height: 25px;
      color: #fff;
      cursor: pointer;
      text-align: center;
      background-color: royalblue;
      margin-left: 100px;
    }
    .register {
      width: 50px;
      height: 25px;
      color: #fff;
      cursor: pointer;
      text-align: center;
      background-color: orange;
      margin-left: 10px;
    }
    .out {
      width: 50px;
      height: 25px;
      color: #fff;
      cursor: pointer;
      text-align: center;
      background-color: red;
      margin-left: 100px;
    }
    .publish {
      width: 45px;
      height: 45px;
      cursor: pointer;
      background-image: url('./images/发布.png');
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% auto;
      position: absolute;
      top: 75px;
      left: 700px;
      text-align: center;
    }
    .shopping {
      width: 50px;
      height: 50px;
      cursor: pointer;
      background-image: url('./images/购物车.png');
      background-position: 0 0;
      background-size: 100% auto;
      background-repeat: no-repeat;
      position: absolute;
      top: 75px;
      left: 800px;
      text-align: center;
    }
    .shoprecord {
      width: 50px;
      height: 50px;
      cursor: pointer;
      background-image: url('./images/历史记录.png');
      background-position: 0 0;
      background-size: 100% auto;
      background-repeat: no-repeat;
      position: absolute;
      top: 75px;
      left: 900px;
      text-align: center;
    }
}
.textcontainer {
    margin-left: 300px;
    position: relative;
    width: 1000px;
    height: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    background-color: #ffff;
    box-shadow: 10px 10px 5px #888888;
    margin-bottom: 20px;
    .title {
      color: #fb7299;
      font-weight: 600;
      font-size: 20px;
      margin-top: 10px;
      margin-left: 10px;
      margin-bottom: 5px;
    }
    .time {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #99a2aa;
      font-size: 14px;
    }
    .text {
      margin-left: 10px;
      font-size: 16px;
      color: #000;
      padding-right: 120px;
      margin-right: 10px;
    }
    .delbtn {
      width: 50px;
      position: absolute;
      top: 40px;
      right: 20px;
    }
}
.loginform {
  padding: 0;
}
.uploaddialog {
  padding: 0;
}
.shopcontainer {
  display: flex;
  flex-direction: column;
  .shopbox {
    display: flex;
    background-color: #2196F3;
    margin-bottom: 20px;
    .shopname {
      width: 100px;
      margin-right: 200px;
    }
    .shopimg {
      margin-right: 200px;
      img {
        width: 120px;
        height: 160px;
        padding: 5px 0 5px 0;
      }
    }
    .shopprice {
      margin-right: 80px;
    }
    .shopstatus {
      display: flex;
      flex-direction: column;
      .delbtn {
        margin-top: 20px;
        margin-bottom: 50px;
      }
    }
  }
}

.shoprecordcontainer {
  display: flex;
  flex-direction: column;
  .recordbox {
    display: flex;
    background-color: #2196F3;
    margin-bottom: 20px;
    .recordname {
      margin-right: 300px;
    }
    .recordpice {
      margin-right: 300px;
    }
  }
}

</style>
